<template>
	<div class="user-info-container">
		<van-cell-group>
			<van-field v-model="userInfo.userName" label="姓名" input-align="right" readonly size="large" />

			<van-field v-model="userInfo.phonenumber" label="手机" input-align="right" readonly size="large" />
		</van-cell-group>
	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useUserStore, useCacheStore } from '@/stores'
import { showToast } from 'vant'

const userInfo = ref({})
const userStore = useUserStore()
const cacheStore = useCacheStore()

const initData = async () => {
	try {
		// 优先从 cacheStore 获取带过期策略的缓存
		const cached = cacheStore.getCachedDataWithExpiry('userInfo')
		if (cached) {
			userInfo.value = cached
		} else {
			// fallback to store
			userStore.loadFromCache()
			if (userStore.userInfo) {
				userInfo.value = userStore.userInfo
			}
		}
	} catch (e) {
		console.error('初始化用户详情失败', e)
		showToast('加载用户信息失败')
	}
}

onMounted(initData)
</script>

<style scoped>
.user-info-container {
	padding: 12px;
	background: #fff;
	min-height: 100vh;
}
</style>
